import React from 'react';
import { Card, Modal, Button } from 'antd';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;
class BaseUserDetailModal extends React.PureComponent {
  check = (str) => {
    let newStr = str.toString();
    if (newStr.length < 2) {
      newStr = `0${newStr}`;
    }
    return newStr;
  }
  fmtDate = (date) => {
    const oldDate = new Date(date);
    const mat = {};
    mat.M = oldDate.getMonth() + 1;
    mat.H = oldDate.getHours();
    mat.s = oldDate.getSeconds();
    mat.m = oldDate.getMinutes();
    mat.Y = oldDate.getFullYear();
    mat.D = oldDate.getDate();
    mat.d = oldDate.getDay();// 星期几
    mat.d = this.check(mat.d);
    mat.H = this.check(mat.H);
    mat.M = this.check(mat.M);
    mat.D = this.check(mat.D);
    mat.s = this.check(mat.s);
    mat.m = this.check(mat.m);
    return `${mat.Y}-${mat.M}-${mat.D} ${mat.H}:${mat.m}:${mat.s}`;
  };
  render() {
    const { changeVisible, detailModelData, vehicleDetailModelData, accountType } = this.props;
    const status = ['', '已销售', '车厂', '销售取消', '经销商'];
    const sex = ['未定义', '男', '女'];
    const type = ['是', '否'];
    const idType = ['其它', '身份证', '驾驶证'];
    return (
      <Modal
        title="详细信息"
        style={{ top: 20 }}
        width="40%"
        visible={this.props.visible}
        onCancel={() => changeVisible()}
        footer={[
          <Button key="back" type="primary" size="default" onClick={() => changeVisible()}>
            返回
          </Button>,
        ]}
      >
        <div>
          <Card bordered={false} type="inner" title="用户信息">
            <DescriptionList >
              <Description term="用户名"style={{ width: '50%' }}>{detailModelData.userName}</Description>
              <Description term="性别"style={{ width: '50%' }}>{sex[detailModelData.sexuality] }</Description>
              <Description term="证件类型"style={{ width: '50%' }}>{idType[detailModelData.idType]}</Description>
              <Description term="证件号"style={{ width: '50%' }}>{detailModelData.idNo}</Description>
              <Description term="手机号"style={{ width: '50%' }}>{detailModelData.mobilePhone}</Description>
              <Description term="邮箱"style={{ width: '50%' }}>{detailModelData.email}</Description>
              <Description term="是否车主"style={{ width: '50%' }}>{type[accountType]}</Description>
            </DescriptionList>
          </Card>
          <Card bordered={false} type="inner" title="车辆信息">
            <DescriptionList>
              <Description term="VIN号"style={{ width: '50%' }}>{vehicleDetailModelData.vin}</Description>
              <Description term="品牌"style={{ width: '50%' }}>{vehicleDetailModelData.brandId}</Description>
              <Description term="车系"style={{ width: '50%' }}>{vehicleDetailModelData.seriesId }</Description>
              <Description term="车型"style={{ width: '50%' }}>{vehicleDetailModelData.styleId }</Description>
              <Description term="车辆状态"style={{ width: '50%' }}>{status[vehicleDetailModelData.status] }</Description>
              <Description term="车牌"style={{ width: '50%' }}>{vehicleDetailModelData.licence}</Description>
              <Description term="颜色"style={{ width: '50%' }}>{vehicleDetailModelData.colorId}</Description>
              <Description term="发动机号"style={{ width: '50%' }}>{vehicleDetailModelData.doptCode}</Description>
              <Description term="经销商"style={{ width: '50%' }}>{vehicleDetailModelData.dealerId}</Description>
              <Description term="SIM卡号"style={{ width: '50%' }}>{vehicleDetailModelData.sim}</Description>
              <Description term="车机号"style={{ width: '50%' }}>{vehicleDetailModelData.ipda}</Description>
              <Description term="T-BOX号"style={{ width: '50%' }}>{vehicleDetailModelData.tbox}</Description>
            </DescriptionList>
          </Card>
        </div>
      </Modal>
    );
  }
}

export default BaseUserDetailModal;
